<script setup lang="ts">
import { ref } from "vue";
import { Search } from "@element-plus/icons-vue";
import { fuzzySearch } from "@/api/pipe";
import { getPOIByKeyword } from "@/utils/map";

const inputRef = ref("");
const resultRef = ref([]);
const searchType = ref(0);
const { store } = defineProps({ store: Object });

const change = async (value: string) => {
  let rst = [];
  if (searchType.value === 1) {
    const { data, succeeded }: any = await fuzzySearch({
      pageIndex: 1,
      pageSize: 10,
      queryVal: value,
    });
    if (succeeded) {
      rst = data.items;
    }
  } else {
    const { pois, status }: any = await getPOIByKeyword(value);
    if (status && Array.isArray(pois)) {
      rst = pois.slice(0, 10).map((item) => {
        const { name, location } = item;
        const [lon, lat] = location.split(",").map(Number);
        return {
          name,
          lon,
          lat,
          typeName: "地名",
          gisNo: "",
        };
      });
    }
  }

  resultRef.value = rst;
};
const onClick = (d: any) => {
  if (store) {
    store.setSelectedFeature(d);
  }
};
const onTypeChange = (index: number) => {
  searchType.value = index;
  change(inputRef.value);
};
</script>

<template>
  <div class="search-the-container">
    <el-dropdown class="dropdown" @command="onTypeChange">
      <span class="el-dropdown-link">
        {{ ["地图", "设备"][searchType] }}
        <el-icon class="el-icon--right">
          <arrow-down />
        </el-icon>
      </span>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item :command="0">地图</el-dropdown-item>
          <el-dropdown-item :command="1">设备</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
    <el-input
      v-model="inputRef"
      :placeholder="
        ['请输入名称搜地点', '请输入管点/段编号、名称、区域'][searchType]
      "
      class="input-with-select search"
      style="flex: 1; height: 45px"
      clearable
      @change="change"
    >
      <template #append>
        <el-button :icon="Search" class="button" style="height: 45px" />
      </template>
    </el-input>
  </div>
  <div v-if="inputRef" class="content">
    <div
      class="row"
      v-for="item in resultRef"
      :key="item.id"
      @click="onClick(item)"
    >
      <span
        :title="item.name"
        :style="{ width: ['100%', '50%'][searchType] }"
        >{{ item.name }}</span
      >
      <span
        v-if="searchType === 1"
        :title="item.gisNo"
        :style="{ width: ['100%', '50%'][searchType] }"
        >{{ item.gisNo && item.gisNo + " / " + item.typeName }}</span
      >
    </div>
  </div>
</template>

<style scoped lang="scss">
.search-the-container {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 1000;
  display: flex;
  min-width: 500px !important;
  max-width: 500px !important;
  overflow: hidden;
}

.dropdown {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  background: #fff;
}

.button {
  background: #3385ff !important;

  :deep(.el-icon) {
    color: white;
  }
}

.content {
  position: absolute;
  top: 70px;
  left: 80px;
  z-index: 1000;
  width: 435px;
  background: #fff;

  .row {
    display: flex;
    justify-content: space-between;
    height: 40px;
    padding: 0 30px;
    margin: 10px;
    line-height: 40px;
    cursor: pointer;
    border-bottom: 1px solid rgb(135 138 153 / 10%);

    span {
      overflow: hidden; //超出的文本隐藏
      text-overflow: ellipsis; //溢出用省略号显示
      white-space: nowrap; //溢出不换行
    }
    span:nth-child(2) {
      color: #adabab;
    }
  }
}
</style>
